<template>
  <div class="app-container">
    <div class="echart">
      <div id="consensusInfo"></div>
    </div>
    <div class="basicInfo">
      <p class="title">动态信息</p>
      <el-table
        :data="dataList"
        style="width: 100%"
        :header-cell-style="{background:'#f2f9fe'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xwbt"
          label="标题"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <a
              :href="scope.row.wz"
              target="_blank"
            >{{scope.row.xwbt}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="xwly"
          label="来源"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xwfbsj"
          label="发布时间"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="button">
        <el-button
          type="primary"
          @click="goBack"
        >返回上页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCbInfo, getOpinionChart, getOpinionInfo } from '@/api/portay'
export default {
  data() {
    return {
      shtyxydm: undefined,
      //列表数据
      dataList: [],
      backPage: '',
    }
  },
  created() {
    this.shtyxydm = this.$route.query.shtyxydm
    this.backPage = this.$route.query.page
  },
  mounted() {
    this.opinionChart()
    this.opinionInfo()
  },
  methods: {
    opinionChart() {
      getOpinionChart({ TYSHXYDM: this.shtyxydm }).then((res) => {
        let xData = res.data.map((item) => item.year)
        let yData = res.data.map((item) => item.num)
        this.getConsensusInfo(xData, yData)
      })
    },
    opinionInfo() {
      getOpinionInfo({ TYSHXYDM: this.shtyxydm }).then((res) => {
        this.dataList = res.data
      })
    },
    getConsensusInfo(xData, yData) {
      var chartDom = document.getElementById('consensusInfo')
      var consensusInfoChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '动态信息 （条）',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'bar',
            barWidth: 50,
          },
        ],
      }

      option && consensusInfoChart.setOption(option, true)
      window.addEventListener('resize', () => {
        consensusInfoChart.resize()
      })
    },
    //返回上一页
    goBack() {
      this.$router.go(-1)
      /* let path = '/portray1/'+this.backPage
            this.$router.push({ path: path});  */
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.app-container {
  background: #f0f0f0;
  padding: 24px;
  font-size: 14px;
}
#consensusInfo {
  width: 1594px;
  height: 386px;
}
.echart {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  height: 430px;
  padding: 12px 24px;
}
.basicInfo {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  min-height: 200px;
  padding: 12px 24px;
  margin-top: 20px;
  .button {
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.msgInfo {
  font-weight: 900;
  color: #000;
}
.pray {
  color: #a6a6a6;
}
.glqy {
  color: #4a8bf6;
}
.glqy:hover {
  cursor: pointer;
}
</style>